
<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
    <div class="container mx-auto px-4 py-8">
      <header class="text-center mb-8">
        <h1 class="text-4xl font-bold text-gray-800 mb-2">
          <i class="fas fa-robot mr-3 text-indigo-600"></i>
          AI数字主播短视频生成器
        </h1>
        <p class="text-gray-600">上传照片和文字，一键生成数字主播短视频</p>
      </header>

      <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-6">
        <el-form :model="form" label-width="120px" class="space-y-6">
          <!-- 照片上传 -->
          <el-form-item label="主播照片">
            <el-upload
              class="upload-demo"
              drag
              action="/api/upload/photo"
              :on-success="handlePhotoSuccess"
              :before-upload="beforePhotoUpload"
              accept="image/*"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将照片拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，建议上传正面清晰照片</div>
            </el-upload>
          </el-form-item>

          <!-- 文字输入 -->
          <el-form-item label="主播台词">
            <el-input
              v-model="form.script"
              type="textarea"
              :rows="4"
              placeholder="请输入主播要说的台词..."
              maxlength="500"
              show-word-limit
            ></el-input>
          </el-form-item>

          <!-- 语音设置 -->
          <el-form-item label="语音设置">
            <div class="flex space-x-4">
              <el-select v-model="form.voice" placeholder="选择声音">
                <el-option label="标准女声" value="female"></el-option>
                <el-option label="标准男声" value="male"></el-option>
                <el-option label="温柔女声" value="soft_female"></el-option>
              </el-select>
              <el-slider
                v-model="form.speed"
                :min="0.5"
                :max="2"
                :step="0.1"
                show-input
                class="flex-1"
              ></el-slider>
            </div>
          </el-form-item>

          <!-- 视频设置 -->
          <el-form-item label="视频设置">
            <div class="flex space-x-4">
              <el-select v-model="form.resolution" placeholder="分辨率">
                <el-option label="1080x1920 (竖屏)" value="1080x1920"></el-option>
                <el-option label="720x1280 (竖屏)" value="720x1280"></el-option>
              </el-select>
              <el-input-number
                v-model="form.duration"
                :min="5"
                :max="60"
                :step="5"
                placeholder="时长(秒)"
              ></el-input-number>
            </div>
          </el-form-item>

          <!-- 生成按钮 -->
          <el-form-item>
            <el-button
              type="primary"
              size="large"
              @click="generateVideo"
              :loading="loading"
              :disabled="!form.photo || !form.script"
              class="w-full"
            >
              <i class="fas fa-magic mr-2"></i>
              生成短视频
            </el-button>
          </el-form-item>
        </el-form>

        <!-- 进度显示 -->
        <div v-if="loading" class="mt-6">
          <el-progress :percentage="progress" :status="progressStatus"></el-progress>
          <p class="text-center text-gray-600 mt-2">{{ statusText }}</p>
        </div>

        <!-- 结果预览 -->
        <div v-if="resultVideo" class="mt-6">
          <h3 class="text-lg font-semibold mb-4">生成结果</h3>
          <video
            :src="resultVideo"
            controls
            class="w-full max-w-md mx-auto rounded-lg shadow-md"
          ></video>
          <div class="text-center mt-4">
            <el-button type="success" @click="downloadVideo">
              <i class="fas fa-download mr-2"></i>
              下载视频
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const form = reactive({
  photo: null,
  script: '',
  voice: 'female',
  speed: 1.0,
  resolution: '1080x1920',
  duration: 15
})

const loading = ref(false)
const progress = ref(0)
const progressStatus = ref('')
const statusText = ref('')
const resultVideo = ref('')

const handlePhotoSuccess = (response) => {
  form.photo = response.filename
  ElMessage.success('照片上传成功')
}

const beforePhotoUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt5M = file.size / 1024 / 1024 < 5
  
  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
  }
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过 5MB!')
  }
  return isImage && isLt5M
}

const generateVideo = async () => {
  if (!form.photo || !form.script) {
    ElMessage.warning('请上传照片并输入台词')
    return
  }

  loading.value = true
  progress.value = 0
  statusText.value = '正在生成语音...'

  try {
    const response = await axios.post('/api/generate', form)
    const taskId = response.data.task_id
    
    // 轮询进度
    const checkProgress = setInterval(async () => {
      try {
        const progressRes = await axios.get(`/api/progress/${taskId}`)
        progress.value = progressRes.data.progress
        statusText.value = progressRes.data.status
        
        if (progressRes.data.status === 'completed') {
          clearInterval(checkProgress)
          resultVideo.value = progressRes.data.video_url
          progressStatus.value = 'success'
          ElMessage.success('视频生成成功！')
          loading.value = false
        } else if (progressRes.data.status === 'failed') {
          clearInterval(checkProgress)
          progressStatus.value = 'exception'
          ElMessage.error('视频生成失败')
          loading.value = false
        }
      } catch (error) {
        clearInterval(checkProgress)
        ElMessage.error('获取进度失败')
        loading.value = false
      }
    }, 1000)
  } catch (error) {
    ElMessage.error('生成请求失败')
    loading.value = false
  }
}

const downloadVideo = () => {
  if (resultVideo.value) {
    const link = document.createElement('a')
    link.href = resultVideo.value
    link.download = 'ai-anchor-video.mp4'
    link.click()
  }
}
</script>

<style scoped>
.upload-demo {
  width: 100%;
}
</style>
